const Vue=require('vue/dist/vue');
const MessageList = Vue.component("message-list", {

    template:`<div class="card" style="width: 300px; z-index: 100;">
    
    <div>

        <div>
            <textarea id="msgArea" rows="25" style="width: 100%;"  readonly>{{areaMsgs}}</textarea>
        </div>
    </div>
    <div>
        <div>
            <input type="text" v-model="content">
            <button class="btn btn-primary" v-on:click="sendMessage()" @keyup.enter="sendMessage()">发送</button>
        </div>
    </div>
</div>`,
    data() {
        return {
            messages: [{'username': "陈锦银", 'content': "大家好, 欢迎来到DC教育直播平台。"}],
            username: "",
            content:"",
            areaMsgs: ""
        };
    },

    created() {
      this.keyupEnter();  
    },

    methods: {
        keyupEnter(){
            document.onkeydown = e =>{
                let body = document.getElementsByTagName('body')[0]
                if (e.keyCode === 13) {
                    console.log('enter')
                    this.sendMessage()
                }
            }
        },

        sendMessage() {
            let room = localStorage.classroomName;
            if (room && this.content) {
                console.log('msgList send: ' + room + ' ' + this.content);
                this.$emit('sendMessage', room, this.content);
                this.content = "";
            }
        },

        gotMsg(message) {
            this.messages.push(message);
            this.areaMsgs = this.areaMsgs + message.username + ": " + message.content + "\n";
            let textarea = document.getElementById('msgArea');
            textarea.scrollTop = textarea.scrollHeight;
        },

        listMessages(messages) {
            this.messages.length = 0;
            this.messages.push(...messages);
        }
    }
});

